border 的基本屬性(寬度、樣式、顏色)border-radius)box-shadow 建立立體感效果<body>
  <h1>CSS 邊框與陰影示範</h1>
  <div class="box solid">實線邊框</div>
  <div class="box dashed">虛線邊框</div>
  <div class="box rounded">圓角邊框</div>
  <div class="box shadow">帶有陰影的卡片</div>
</body>
body {
  font-family: "Microsoft JhengHei", Arial, sans-serif;
  background: #f5f5f5;
  text-align: center;
  padding: 30px;
}
h1 {
  margin-bottom: 24px;
  color: #333;
}
.box {
  width: 200px;
  margin: 15px auto;
  padding: 20px;
  background: white;
}
.solid {
  border: 2px solid #3498db;
}
.dashed {
  border: 2px dashed #e67e22;
}
.rounded {
  border: 2px solid #2ecc71;
  border-radius: 15px;
}
.shadow {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

border 至少要有寬度與樣式border-radius 更簡單rgba() 製造柔和效果border-radius: 50%,做成圓形頭像border-radius 與 box-shadow
box-shadow)今天練習了 CSS 的邊框與陰影,發現這些小小的樣式可以大大改變版面的感覺。最基本的 border 讓元素有清楚的界線,而 border-radius 只要調整數值,就能輕鬆做出圓角或圓形圖片,非常直覺。
我覺得最有趣的是 box-shadow,一開始看起來很複雜,但其實就是 x、y 偏移加上模糊與顏色。透過透明度的調整,可以讓陰影變得很自然,完全不用靠圖片去模擬。
這讓我體會到 CSS 不只是「裝飾」,而是能用簡單的屬性創造出設計感。以後做卡片、按鈕或模態視窗時,這些技巧一定會用上。